<template>
  <div class="img-list">
    <my-header outerTitle="图文列表"></my-header>
    <div class="cate">
      <ul id="cateul">
        <li><span>全部</span></li>
        <li v-for="item in cateList" :key="item.id" @click="handleClickCate(item.id)"><span>{{item.title}}</span></li>
      </ul>
    </div>
    <div class="img-list-box">
      <ul>
        <li v-for="item in imgsList" :key="item.id">
          <router-link :to="`/imgsDetail/${item.id}`">
            <img :src="item.img_url" alt="">
          </router-link>
          <p>
            <span class="title">{{item.title}}</span>
            {{item.zhaiyao}}
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import myHeader from '@/components/myHeader'
import { getImgsList, getImgs } from '@/api'
export default {
  components: {
    myHeader
  },
  data () {
    return {
      cateList: [], // 顶部分类
      imgsList: [],
      id: 0
    }
  },
  created () {
    this.initCateList()
    this.initImgsList(this.id)
  },
  methods: {
    // 顶部分类初始化
    initCateList () {
      getImgsList()
        .then(res => {
          this.cateList = res.message
          // 设置ul的宽度，让分类名显示在一行上
          // 获取分类名的个数，因为自定义了一个全部的类名，所以要加1
          let totalNum = res.message.length + 1
          // 设置每个分类名称的宽为60
          let nameVal = 60
          document.getElementById('cateul').style.width = totalNum * nameVal + 'px'
        })
    },
    // 获取图片列表
    initImgsList (id) {
      getImgs(id)
        .then(res => {
          this.imgsList = res.message
        // console.log(this.imgsList)
        })
    },
    // 处理点击分类
    handleClickCate (id) {
      this.initImgsList(id)
    }
  }
}
</script>
<style lang="scss" scoped>
  .img-list {
    margin-bottom: 55px;
    margin-top: 8px;
  }
  .cate {
    max-width: 100%;
    margin: 0;
    overflow-x:auto;
    overflow-y: hidden;
    font-size: 14px;
    ul {
      padding-left: 10px;
      margin: 5px 0;
      li {
        list-style: none;
        display: inline-block;
        padding: 0 0 0 5px;
        span {
          color:#0094ff;
        }
      }
    }
  }
  .img-list-box {
    ul {
      padding: 0;
      li {
        list-style: none;
        position: relative;
      }
    }
    p {
      font-size: 14px;
      color: #fff;
      position: absolute;
      bottom: 0px;
      left: 0px;
      background-color: rgba(0,0,0,0.4);
      .title {
        font-weight: bold;
      }
    }
    img {
      width: 100%;
    }
  }

  image[lazy=loading] {
    width: 100%;
    margin: auto;
  }
</style>
